<template>
	<!-- 转单 -->
	<view class="page">
		<view class="main">
			<u-search height="80rpx" inputAlign="center" placeholder="输入鉴定师编号查询" v-model="keyword" shape="square"
				:showAction="false"></u-search>
			<view class="title">选择鉴定师</view>
			
			
			<c-scroll-list :api="api" :apiParams="{number:this.keyword}" @load="load">
			<view class="list" v-for="(v,i) in appraiserList" :key="i" @click="selectAppraiser(i)">
				<view class="list_l">
					<image class="header-img" :src="vuex_imgUrl + v.avatar" mode=""></image>
					<view class="user">
						<view class="name">{{v.nickname}}</view>
						<view class="job" v-if="v.type==1" >球鞋鉴定师</view>
						<view class="job" v-else-if="v.type==2" >奢潮鉴定师</view>
					</view>
				</view>
				<image v-if="appraiser==i" class="gou" src="/static/tabbar/gou.png" mode=""></image>
				<image v-else class="gou" src="/static/common/radio.png" mode=""></image>
			</view>
			</c-scroll-list>

		</view>

		<view class="btn-box">
			<button class="btn" @click="transfers">确定转单</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "transferOrder",
		data() {
			return {
				keyword: null,
				api: this.$api.getAppraiserList,
				appraiser:'',
				appraiserList:[],
				id:null,
				appraiserId:null,
				
			};
		},
		onLoad(data) {
			this.id = data.param
			console.log(this.id,"订单id")
			// this.getAppraiserList();
		},
		onShow() {

		},
		methods: {
			  // 更新选择的鉴定师索引和ID
			  selectAppraiser(index) {
			    this.appraiser = index;
			    this.appraiserId = this.appraiserList[index].id; // 获取当前选择鉴定师的ID并赋值给appraiserId
				console.log(this.appraiserId,"鉴定师id")
			  },
			// 获取数据列表
			load(res) {
				console.log(res, '列表数据');
				console.log(res.data,"鉴定师列表")
				this.appraiserList = res.list
				if(this.appraiserId==null){
					this.appraiserId = this.appraiserList[0].id;
					console.log("选中鉴定师id:",this.appraiserId)
				}
			},
			getAppraiserList(){
				this.$api.getAppraiserList({number:this.keyword}).then(res=>{
					console.log(res.data,"鉴定师列表")
					this.appraiserList = res.data.list
				})
			},
			transfers(){
				console.log({id:this.id,appraiserId:this.appraiserId},"data")
				this.$api.transfers({id:this.id,appraiserId:this.appraiserId}).then(res=>{
					console.log("转单成功",res)
						uni.$u.toast('转单成功');
						setTimeout(()=>{
							uni.navigateTo({
								url: '/pages/appraiser/pages/workTable'
							});
						},2000)

				})
			}
		},
		  watch: {
		    // 监听 keyword 的变化
		    keyword(number) {
		      // 当 keyword 发生变化时，重新获取鉴定师列表
			  console.log(number)
		      this.getAppraiserList();
		    }
		  },
	};
</script>

<style lang="scss" scoped>
	.main {
		padding: 32rpx;
		box-sizing: border-box;

		.title {
			font-weight: bold;
			font-size: 32rpx;
			color: #1A1A1A;
			margin-top: 40rpx;
		}

		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E6E6E6;
			padding: 24rpx 0;

			.list_l {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.header-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;
				}

				.user {
					height: 80rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-weight: bold;
						font-size: 28rpx;
						color: #1A1A1A;
					}

					.job {
						font-size: 24rpx;
						color: #333333;
					}
				}
			}

			.gou {
				width: 28rpx;
				height: 28rpx;
			}

		}

	}
</style>